<template>
  <view class="container">
    <!-- 顶部渐变背景区域 -->
    <view class="header-section">
      <!-- 默写报告模块 -->
      <view class="report-header">
        <view class="report-left">
          <view class="report-title">默写批改报告</view>
          <view class="report-desc">1. 建议重点训练"是、做"等字。</view>
          <view class="report-desc">2. 重点关注"小明"的学习情况，他的错误较多</view>
        </view>
        <view class="report-right">
          <view class="task-detail f f-a-c f-j-c">任务详情
            <image src="/static/youjiantou.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
          </view>
          <view class="ai-bg">
            <image src="/static/AI.png" class="ai-icon" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>

    <!-- 数据统计模块 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-label">人数:{{ reportData.submitNum }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">提交:{{ reportData.submitNum }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">AI批改:{{ reportData.submitNum }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">异常:0</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">未审阅:0</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">未提交:0</text>
        </view>
      </view>

      <view class="summary-stats">
        <view class="summary-item">
          <text class="summary-number">{{ reportData.allCorrectNum }}</text>
          <text class="summary-label">全对</text>
        </view>
        <view class="summary-item">
          <text class="summary-number">{{ reportData.errorNum }}</text>
          <text class="summary-label">有错</text>
        </view>
        <view class="summary-item">
          <text class="summary-number">0</text>
          <text class="summary-label">未批改</text>
        </view>
      </view>
    </view>

    <!-- 错误统计图表 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="chart-title-wrapper f f-a-c f-j-c">
          <view style="margin-top: -15rpx;" class="chart-title">错误统计</view>
        </view>
      </view>
      <view class="chart-container">
        <eachet :nameList="studentNameList" :list="studentErrorList"></eachet>
      </view>
    </view>

    <!-- 错字统计图表 -->
    <view class="chart-section">
      <view class="chart-header">
        <view class="chart-title-wrapper f f-a-c f-j-c">
          <view style="margin-top: -15rpx;" class="chart-title">错字统计</view>
        </view>
      </view>
      <view class="chart-container">
        <eachet3 :nameList="errorZiNameList" :list="errorZiList"></eachet3>
      </view>
    </view>

    <!-- 作业展示模块 -->
    <view class="homework-section">
      <!-- 异常作业 -->
      <view class="homework-category">
        <view class="category-header">
          <view class="category-tag abnormal">异</view>
          <text class="category-title">异常作业</text>
          <text class="category-action">分享</text>
          <image class="share-icon" src="/static/youjiantou.png"></image>
        </view>
        <view class="homework-images">
          <image 
            v-for="(item, index) in abnormalHomework" 
            :key="index"
            :src="item.thumbnail"
            class="homework-img"
            @click="viewHomework(item)"
          ></image>
        </view>
      </view>
      
      <!-- 优秀作业 -->
      <view class="homework-category">
        <view class="category-header">
          <view class="category-tag excellent">优</view>
          <text class="category-title">优秀作业</text>
          <text class="category-action">分享</text>
          <image class="share-icon" src="/static/youjiantou.png"></image>
        </view>
        <view class="homework-images">
          <image 
            v-for="(item, index) in excellentHomework" 
            :key="index"
            :src="item.thumbnail"
            class="homework-img"
            @click="viewHomework(item)"
          ></image>
        </view>
      </view>
      
      <!-- 待提升作业 -->
      <view class="homework-category">
        <view class="category-header">
          <view class="category-tag improve">待</view>
          <text class="category-title">待提升作业</text>
          <text class="category-action">分享</text>
          <image class="share-icon" src="/static/youjiantou.png"></image>
        </view>
        <view class="homework-images">
          <image 
            v-for="(item, index) in improvementHomework" 
            :key="index"
            :src="item.thumbnail"
            class="homework-img"
            @click="viewHomework(item)"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from "@qiun/ucharts";
import eachet from "@/components/eachet.vue";
import eachet3 from "@/components/eachet3.vue";
export default {
  components: {
    eachet,
    eachet3,
  },
  data() {
    return {
      // 学生错误统计数据（第一个图表）
      studentErrorList: [], // 错误数量数组
      studentNameList: [], // 学生姓名数组

      // 错字统计数据（第二个图表）
      errorZiList: [], // 错字出现次数数组
      errorZiNameList: [], // 错字名称数组

      // 原有的模拟数据（作为备用）
      list: [],
      nameList: [],

      // 接口返回的完整数据
      reportData: {},

      statistics: {
        totalStudents: 20,
        friends: 19,
        trainings: 17,
        abnormal: 2,
        unreviewed: 2,
        unsubmittedStudent: "小红",
        allCorrect: 10,
        hasErrors: 7,
        ungraded: 2,
      },

      // 图表数据
      errorChartData: {
        categories: ["第1题", "第2题", "第3题", "第4题", "第5题"],
        series: [
          {
            name: "错误A",
            data: [15, 8, 12, 10, 16],
          },
          {
            name: "错误B",
            data: [20, 15, 18, 14, 20],
          },
          {
            name: "错误C",
            data: [12, 18, 15, 16, 12],
          },
          {
            name: "错误D",
            data: [8, 12, 10, 8, 14],
          },
        ],
      },

      tutorChartData: {
        categories: ["第1题", "第2题", "第3题", "第4题", "第5题"],
        series: [
          {
            name: "辅导A",
            data: [15, 8, 12, 10, 16],
          },
          {
            name: "辅导B",
            data: [20, 15, 18, 14, 20],
          },
          {
            name: "辅导C",
            data: [12, 18, 15, 16, 12],
          },
          {
            name: "辅导D",
            data: [8, 12, 10, 8, 14],
          },
        ],
      },

      // 作业数据
      abnormalHomework: [],
      excellentHomework: [],
      improvementHomework: [],

      // 预览图片数据
      previewImages: [
        '/static/1.png',
        '/static/2.jpg',
        '/static/1.png'
      ],

      // 数据状态控制
      isErrorZiDataReady: false, // 控制错字数据是否准备好
    };
  },
  onReady() {
    this.initErrorChart();
    this.initTutorChart();
  },
  onLoad(options) {
    this.init(options.taskId);
  },
  methods: {
    async init(id) {
      try {
        let n = await this.$api.reportDetail({
          taskId: id,
        });

        if (n.code === "0000" && n.data) {
          this.reportData = n.data;
          console.log("接口返回数据:", JSON.stringify(this.reportData));

          // 处理学生错误统计数据（第一个图表）
          this.processStudentErrorData();

          // 处理错字统计数据（第二个图表）
          this.processErrorZiData();

          // 处理作业图片数据
          await this.processHomeworkImages();

          // 更新统计信息
          this.updateStatistics();
        } else {
          console.error("获取报告数据失败:", n);
          this.setFallbackData();
        }
      } catch (error) {
        console.error("请求报告数据异常:", error);
        this.setFallbackData();
      }
    },

    /**
     * 处理学生错误统计数据
     */
    processStudentErrorData() {
      if (!this.reportData.students || this.reportData.students.length == 0) {
        console.log("没有学生数据，使用默认数据");
        this.studentNameList = ["默认学生"];
        this.studentErrorList = [0];
        return;
      }

      // 按错误数量降序排序，取前6个
      const sortedStudents = this.reportData.students
        .sort((a, b) => (b.errorCount || 0) - (a.errorCount || 0))
        .slice(0, 6);

      this.studentNameList = sortedStudents.map(
        (student) => student.studentName || "未知学生"
      );
      this.studentErrorList = sortedStudents.map(
        (student) => student.errorCount || 0
      );

      console.log("学生错误统计数据处理完成(取前6个):");
      console.log("学生姓名:", this.studentNameList);
      console.log("错误数量:", this.studentErrorList);
    },

    /**
     * 处理错字统计数据
     */
    processErrorZiData() {
      console.log("开始处理错字统计数据...");
      console.log("原始errorZiCount数据:", this.reportData.errorZiCount);
      console.log("数据类型:", typeof this.reportData.errorZiCount);

      // 检查数据是否存在且为对象
      if (
        !this.reportData.errorZiCount ||
        typeof this.reportData.errorZiCount !== "object" ||
        Array.isArray(this.reportData.errorZiCount)
      ) {
        console.log("errorZiCount数据无效，使用默认数据");
        this.errorZiNameList = ["暂无错字"];
        this.errorZiList = [0];
        this.isErrorZiDataReady = false;
        return;
      }

      // 获取对象的键值对数量
      const entries = Object.entries(this.reportData.errorZiCount);
      console.log("errorZiCount条目数量:", entries.length);
      console.log("所有条目:", entries);

      // 如果没有数据
      if (entries.length === 0) {
        console.log("errorZiCount为空对象，使用默认数据");
        this.errorZiNameList = ["暂无错字"];
        this.errorZiList = [0];
        this.isErrorZiDataReady = false;
        return;
      }

      // 将对象转换为数组，进行数据清洗和排序
      const errorZiArray = entries
        .filter(([zi, count]) => {
          // 过滤掉无效数据
          const isValid =
            zi && zi.trim() && !isNaN(Number(count)) && Number(count) > 0;
          if (!isValid) {
            console.warn("过滤无效数据:", zi, count);
          }
          return isValid;
        })
        .map(([zi, count]) => ({
          zi: zi.trim(), // 去除空格
          count: Number(count), // 确保是数字类型
        }))
        .sort((a, b) => b.count - a.count) // 按出现次数降序排序
        .slice(0, 6); // 取前6个

      console.log("处理后的错字数组(取前6个):", errorZiArray);

      // 如果处理后没有有效数据
      if (errorZiArray.length === 0) {
        console.log("处理后无有效数据，使用默认数据");
        this.errorZiNameList = ["暂无错字"];
        this.errorZiList = [0];
        this.isErrorZiDataReady = false;
        return;
      }

      // 提取名称和数量数组
      this.errorZiNameList = errorZiArray.map((item) => item.zi);
      this.errorZiList = errorZiArray.map((item) => item.count);

      console.log("错字统计数据处理完成(取前6个):");
      console.log("错字名称:", this.errorZiNameList);
      console.log("出现次数:", this.errorZiList);

      // 验证数据格式并设置准备状态
      this.isErrorZiDataReady = this.validateErrorZiData();
    },

    /**
     * 验证错字数据格式是否正确
     */
    validateErrorZiData() {
      try {
        // 检查数组是否存在且为数组类型
        const nameListValid =
          Array.isArray(this.errorZiNameList) &&
          this.errorZiNameList.length > 0;
        const dataListValid =
          Array.isArray(this.errorZiList) && this.errorZiList.length > 0;

        // 检查两个数组长度是否一致
        const lengthMatched =
          this.errorZiNameList.length === this.errorZiList.length;

        // 检查数据数组是否都是数字
        const allNumbers = this.errorZiList.every(
          (item) => typeof item === "number" && !isNaN(item)
        );

        // 检查名称数组是否都是字符串
        const allStrings = this.errorZiNameList.every(
          (item) => typeof item === "string" && item.trim().length > 0
        );

        const isValid =
          nameListValid &&
          dataListValid &&
          lengthMatched &&
          allNumbers &&
          allStrings;

        console.log("错字数据验证结果:", {
          nameListValid,
          dataListValid,
          lengthMatched,
          allNumbers,
          allStrings,
          isValid,
          nameListLength: this.errorZiNameList.length,
          dataListLength: this.errorZiList.length,
        });

        if (isValid) {
          console.log("✅ 错字数据验证通过，可以渲染图表");
        } else {
          console.error("❌ 错字数据验证失败，不渲染图表");
        }

        return isValid;
      } catch (error) {
        console.error("错字数据验证过程中出错:", error);
        return false;
      }
    },

    /**
     * 更新统计信息
     */
    updateStatistics() {
      if (this.reportData) {
        this.statistics = {
          ...this.statistics,
          totalStudents: this.reportData.classStuNum || 0,
          submitted: this.reportData.submitNum || 0,
          checked: this.reportData.checkNum || 0,
          abnormal: this.reportData.exceptNum || 0,
          allCorrect: this.reportData.allCorrectNum || 0,
          hasErrors: this.reportData.errorNum || 0,
        };
      }
    },

    /**
     * 设置备用数据
     */
    setFallbackData() {
      console.log("使用备用数据");
      // 设置学生错误统计备用数据
      this.studentNameList = ["学生A", "学生B", "学生C"];
      this.studentErrorList = [5, 3, 2];

      // 设置错字统计备用数据
      this.errorZiNameList = ["的", "了", "在"];
      this.errorZiList = [8, 5, 3];

      // 验证错字数据格式
      this.isErrorZiDataReady = this.validateErrorZiData();

      console.log("备用数据设置完成，错字数据状态:", this.isErrorZiDataReady);
    },

    /**
     * 处理作业图片数据
     */
    async processHomeworkImages() {
      console.log("开始处理作业图片数据...");

      try {
        // 并行处理三种类型的作业图片
        const [abnormalHomework, excellentHomework, improvementHomework] =
          await Promise.all([
            this.fetchHomeworkImages(
              this.reportData.exceptHomeworks || [],
              "abnormal"
            ),
            this.fetchHomeworkImages(
              this.reportData.excellentHomeworks || [],
              "excellent"
            ),
            this.fetchHomeworkImages(
              this.reportData.needImproveHomeworks || [],
              "improvement"
            ),
          ]);

        this.abnormalHomework = abnormalHomework;
        this.excellentHomework = excellentHomework;
        this.improvementHomework = improvementHomework;

        console.log("作业图片处理完成:");
        console.log("异常作业:", this.abnormalHomework);
        console.log("优秀作业:", this.excellentHomework);
        console.log("需要提升作业:", this.improvementHomework);
      } catch (error) {
        console.error("处理作业图片失败:", error);
      }
    },

    /**
     * 获取作业图片URLs
     */
    async fetchHomeworkImages(imagePaths, type) {
      if (!imagePaths || imagePaths.length === 0) {
        console.log(`${type} 类型作业无图片数据`);
        return [];
      }

      const homeworkList = [];

      for (let i = 0; i < imagePaths.length; i++) {
        const imagePath = imagePaths[i];
        try {
          console.log(`正在获取 ${type} 作业图片 ${i + 1}:`, imagePath);

          const imageResponse = await this.$api.imageUrl({
            image: imagePath,
          });

          if (imageResponse.code === "0000" && imageResponse.data) {
            homeworkList.push({
              id: `${type}_${i + 1}`,
              thumbnail: imageResponse.data,
              imagePath: imagePath,
              type: type,
              index: i,
            });
            console.log(
              `${type} 作业图片 ${i + 1} 获取成功:`,
              imageResponse.data
            );
          } else {
            console.error(`${type} 作业图片 ${i + 1} 获取失败:`, imageResponse);
          }
        } catch (error) {
          console.error(`${type} 作业图片 ${i + 1} 请求异常:`, error);
        }
      }

      return homeworkList;
    },

    // 初始化错误统计图表
    initErrorChart() {
      this.list = [4, 5, 8, 10, 2, 5, 7];
      this.nameList = ["lzl", "lll", "llz", "zll", "zzl", "xz", "zx"];
      this.errorChart = new uCharts({
        type: "column",
        context: uni.createCanvasContext("errorChart", this),
        width: uni.upx2px(690),
        height: uni.upx2px(400),
        categories: this.errorChartData.categories,
        series: this.errorChartData.series,
        animation: true,
        background: "#FFFFFF",
        color: ["#6236FF"],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {
          show: false,
        },
        xAxis: {
          disableGrid: true,
          itemCount: 10,
          scrollShow: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          data: [
            {
              min: 0,
              max: 20,
            },
          ],
        },
        extra: {
          column: {
            type: "group",
            width: uni.upx2px(18),
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
          },
        },
      });
    },

    // 初始化辅导统计图表
    initTutorChart() {
      this.tutorChart = new uCharts({
        type: "column",
        context: uni.createCanvasContext("tutorChart", this),
        width: uni.upx2px(690),
        height: uni.upx2px(400),
        categories: this.tutorChartData.categories,
        series: this.tutorChartData.series,
        animation: true,
        background: "#FFFFFF",
        color: ["#6236FF"],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {
          show: false,
        },
        xAxis: {
          disableGrid: true,
          itemCount: 10,
          scrollShow: true,
        },
        yAxis: {
          gridType: "dash",
          dashLength: 2,
          data: [
            {
              min: 0,
              max: 20,
            },
          ],
        },
        extra: {
          column: {
            type: "group",
            width: uni.upx2px(18),
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
          },
        },
      });
    },

    // 图表触摸事件
    touchErrorChart(e) {
      this.errorChart.showToolTip(e, {
        format: function (item, category) {
          return category + " " + item.name + ":" + item.data;
        },
      });
    },

    moveErrorChart(e) {
      this.errorChart.scroll(e);
    },

    touchEndErrorChart(e) {
      this.errorChart.hideToolTip();
    },

    touchTutorChart(e) {
      this.tutorChart.showToolTip(e, {
        format: function (item, category) {
          return category + " " + item.name + ":" + item.data;
        },
      });
    },

    moveTutorChart(e) {
      this.tutorChart.scroll(e);
    },

    touchEndTutorChart(e) {
      this.tutorChart.hideToolTip();
    },

    // 查看具体作业
    viewHomework(homework) {
      console.log("查看作业详情:", homework);

      // 预览图片
      uni.previewImage({
        urls: [homework.thumbnail],
        current: homework.thumbnail,
        success: () => {
          console.log("图片预览成功");
        },
        fail: (error) => {
          console.error("图片预览失败:", error);
          uni.showToast({
            title: "图片预览失败",
            icon: "error",
          });
        },
      });
    },

    // 预览图片
    previewImage(current, urls) {
      uni.previewImage({
        current: current,
        urls: urls
      });
    },

    handleImageError(e) {
      console.error("图片加载失败:", e);
      uni.showToast({
        title: "图片加载失败",
        icon: "error",
      });
    },

    handleImageLoad(e) {
      console.log("图片加载成功:", e);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: linear-gradient(180deg, #05C490 0%, #5CDFA9 33%, #8EF3BF 66%, #ECF2F0 100%);
}

// 顶部渐变背景区域
.header-section {
  padding: 30rpx;
  padding-bottom: 0;
}

// 默写报告模块
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30rpx;

  .report-left {
    flex: 1;
    position: relative;
    z-index: 10;
    margin-right: 30rpx;

    .report-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
    }

    .report-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
      margin-bottom: 10rpx;
    }
  }

  .report-right {
    display: flex;
    flex-direction: column;
    align-items: center;

    .task-detail {
      font-size: 28rpx;
      color: #fff;
      margin-bottom: 20rpx;
      text-align: right;
    }

    .ai-bg {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;

      .ai-icon {
        position: absolute;
        z-index: 1;
        width: 270rpx;
        height: 234rpx;
        top: -40rpx;
        right: -80rpx;
      }

      .ai-text {
        font-size: 24rpx;
        color: #333;
        margin-top: 10rpx;
      }
    }
  }
}

.report-left {
  flex: 1;
}

.report-title {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 40rpx;
  color: #ffffff;
  margin-bottom: 20rpx;
}

.report-desc {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 400;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 10rpx;
}

.report-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20rpx;
}

.task-detail {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 400;
  font-size: 28rpx;
  color: #ffffff;
  cursor: pointer;
}

.ai-bg {
  width: 270rpx;
  height: 234rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-icon {
  width: 270rpx;
  height: 234rpx;
}

// 数据统计模块
.stats-section {
  position: relative;
  z-index: 10;
  margin: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin-bottom: 40rpx;

    .stat-item {
      padding: 20rpx;
      background: linear-gradient(309deg, #E6FAFE 0%, #D1FFEB 100%);
      border-radius: 12rpx;
      text-align: center;

      .stat-label {
        font-size: 28rpx;
        color: #007D5B;
        font-weight: 500;
      }
    }
  }

  .summary-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .summary-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .summary-number {
        font-size: 48rpx;
        font-weight: bold;
        color: #007D5B;
        margin-bottom: 10rpx;
      }

      .summary-label {
        font-size: 28rpx;
        color: #007D5B;
      }
    }
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.stat-item {
  background: linear-gradient(309deg, #E6FAFE 0%, #D1FFEB 100%);
  border-radius: 12rpx;
  padding: 20rpx;
  text-align: center;
}

.stat-label {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 400;
  font-size: 24rpx;
  color: #007D5B;
}

.summary-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.summary-number {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 600;
  font-size: 48rpx;
  color: #333333;
}

.summary-label {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 400;
  font-size: 24rpx;
  color: #666666;
}

// 图表区域
.chart-section {
  margin: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  .chart-header {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20rpx;

    .chart-title-wrapper {
      width: 200rpx;
      height: 67rpx;
      position: relative;
      top: -40rpx;
      left: -50rpx;
      display: flex;
      align-items: center;
      background: url('/static/chatTitle.png') no-repeat center center;
      background-size: 100% 100%;

      .chart-title {
        font-size: 28rpx;
        color: white;
        font-weight: 500;
        text-align: center;
      }
    }
  }

  .chart-container {
    width: 100%;
    height: 400rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .charts {
      width: 690rpx;
      height: 400rpx;
    }
  }
}

.chart-header {
  background: linear-gradient(90deg, #4E95FF 0%, #7B68EE 100%);
  padding: 20rpx 30rpx;
}

.chart-title-wrapper {
  width: 200rpx;
  height: 67rpx;
}

.chart-title {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 28rpx;
  color: #ffffff;
  text-align: center;
}

.chart-container {
  padding: 30rpx;
  width: 100%;
  height: 400rpx;
}

.charts {
  width: 100%;
  height: 100%;
}

// 作业展示模块
.homework-sections {
  background-color: white;
  border-radius: 20rpx;
  margin: 0 30rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.homework-section {
  margin: 30rpx;
  margin-top: 0;
}

.homework-category {
  background: white;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.category-header {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.category-tag {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.category-tag.abnormal {
  background: #FF6B35;
}

.category-tag.excellent {
  background: #FFD700;
}

.category-tag.improve {
  background: #999;
}

.category-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  flex: 1;
}

.category-action {
  font-size: 28rpx;
  color: #666;
  margin-right: 10rpx;
}

.share-icon {
  width: 24rpx;
  height: 24rpx;
}

.homework-images {
  display: flex;
  gap: 20rpx;
}

.homework-img {
  width: 200rpx;
  height: 280rpx;
  border-radius: 12rpx;
  border: 2rpx solid #eee;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
}

.share-btn {
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 400;
  font-size: 28rpx;
  color: #4e95ff;
  cursor: pointer;
}

.homework-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.homework-item {
  width: 160rpx;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.homework-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-homework {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.no-homework-text {
  font-size: 26rpx;
  color: #666;
}

.loading-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.loading-icon {
  font-size: 48rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.loading-text {
  font-size: 26rpx;
  color: #666;
}
</style>
